<template>
    <div class="box">
        <div class="top">
            <div class="back" @click="$router.back()">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M25 5L10 20L25 35" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="font_title">发帖</div>
            <div class="add" @click="handlePublish">发布</div>
        </div>
        <div class="content">
            <textarea class="cont_input" v-model="content" placeholder="内容(不少于10个字，配图文更佳)"></textarea>
            <div class="image-preview" v-if="imageUrl">
                <img :src="imageUrl" alt="预览图">
                <div class="delete-btn" @click="removeImage">×</div>
            </div>
        </div>
        <div class="bottom">
            <div class="img_btn">
                <svgIcon iconName="icon-tupian1" font-size="60px"></svgIcon>
                <p>图片</p>
                <input type="file" accept="image/*" @change="handleImageUpload" ref="fileInput">
            </div>
            <div class="topiao">
                <svgIcon iconName="icon-a-toupiaoxuanpiao" font-size="60px"></svgIcon>
                <p>投票</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter();
const content = ref('');
const imageUrl = ref('');
const fileInput = ref(null);

// 处理图片上传
const handleImageUpload = (event) => {
    const file = event.target.files[0];
    if (!file) return;
    
    // 检查文件类型
    if (!file.type.startsWith('image/')) {
        showToast('请选择图片文件');
        return;
    }
    
    // 检查文件大小（限制为5MB）
    if (file.size > 5 * 1024 * 1024) {
        showToast('图片大小不能超过5MB');
        return;
    }
    
    // 将图片转换为base64
    const reader = new FileReader();
    reader.onload = (e) => {
        imageUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
};

// 移除图片
const removeImage = () => {
    imageUrl.value = '';
    if (fileInput.value) {
        fileInput.value.value = '';
    }
};

// 处理发布
const handlePublish = async () => {
    // 验证内容
    if (!content.value.trim()) {
        showToast('请输入内容');
        return;
    }
    
    if (content.value.length < 10) {
        showToast('内容不能少于10个字');
        return;
    }
    
    try {
        // 获取现有的帖子列表
        const posts = JSON.parse(localStorage.getItem('posts') || '[]');
        
        // 创建新帖子
        const newPost = {
            id: Date.now(), // 使用时间戳作为唯一ID
            content: content.value,
            image: imageUrl.value,
            createTime: new Date().toLocaleString(),
            likes: 0,
            comments: [],
            user_name: '观万里' // 设置一个默认用户名
        };
        
        // 添加到帖子列表
        posts.unshift(newPost);
        
        // 保存到localStorage
        localStorage.setItem('posts', JSON.stringify(posts));
        
        showToast('发布成功');
        router.back();
    } catch (error) {
        showToast('发布失败，请重试');
        console.error('发布失败:', error);
    }
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    .top {
        width: 100%;
        height: 100px;
        background-color: #fb8fae;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #fff;
        .back {
            width: 120px;
            height: 100%;
            margin-left: 20px;
            line-height: 50px;
            text-align: center;
            display: flex;
            align-items: center;
            svg {
                width: 40px;
                height: 40px;
            }
        }
        .font_title {
            font-size: 32px;
            margin: 0 auto;
        }
        .add {
            margin-right: 20px;
            width: 120px;
            font-size: 32px;
            text-align: center;
            height: 100%;
            line-height: 100px;
            cursor: pointer;
        }
    }
    .content {
        width: 100%;
        height: calc(100vh - 240px);
        font-size: 32px;
        position: fixed;
        top: 100px;
        left: 0;
        padding: 30px;
        .cont_input {
            display: block;
            width: 100%;
            height: 70%;
            font-size: 32px;
            border: none;
            resize: none;
            &::placeholder {
                color: #999;
                font-size: 32px;
            }
        }
        .image-preview {
            position: relative;
            width: 200px;
            height: 200px;
            margin-top: 20px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
            }
            .delete-btn {
                position: absolute;
                top: -10px;
                right: -10px;
                width: 40px;
                height: 40px;
                background: rgba(0, 0, 0, 0.5);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                cursor: pointer;
            }
        }
    }
    .bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 140px;
        border-top: 2px solid gray;
        display: flex;
        align-items: center;
        div {
            width: 375px;
            text-align: center;
            position: relative;
            p {
                font-size: 28px;
            }
            input[type="file"] {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }
        }
    }
}
</style>